<template>
	<!-- 获取当前登陆人所有的巡检计划(有效，并创建有效巡检任务)
	 点击巡检计划进入设备检验记录列表，设备编码查询条件(扫码)，再点击进入检查项列表-->
	<view class="container">
		<view class="data-list">
			<z-paging ref="paging" v-model="inspectionPlanList" @query="getListFun">
				<!-- <view class="search" slot="top">
					<uni-search-bar @confirm="search" :focus="true" v-model="queryParams.name" @input="input" bgColor="#fff"
						placeholder="请输入计划名称" cancel="cancel" @clear="clear">
					</uni-search-bar>
				</view> -->
				<view class="search" slot="top">
					<u-search placeholder="请输入计划名称" v-model="queryParams.name"
						@search="getListFun" @custom='getListFun' @clear="getListFun"></u-search>
				</view>
				<u-line margin="1rpx 0rpx 0rpx 0rpx" />
				<view class="item" v-for="(item,index) in inspectionPlanList">
					<view class="item-title">计划名称：{{item.name}}</view>
					<view class="item-body">
						<view>开始日期：{{timestampToTime(item.startDate)}}</view>
						<view>结束日期：{{timestampToTime(item.endDate)}}</view>
					</view>
				<view style="float: right;">
						<button @click="navigateTo(item)" class="mini-btn" type="primary" size="mini">进入</button>
				</view>
					<u-line margin="30rpx 0rpx 0rpx 0rpx" />
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	import {
		getInspectionPlanAppPage
	} from '@/api/deviceInspection/deviceInspection.js';

	export default {
		data() {
			return {
				/* 列表数据 */
				inspectionPlanList: [],
				/* 查询参数 */
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					name: undefined,
					status: 0,
					type: 1
					// 后端获取
					// userId: undefined
				}
			};
		},
		// 页面初始化时调用
		onInit() {
			getListFun()
		},
		methods: {
			/* 跳转页面 */
			navigateTo(item){
				uni.navigateTo({
				    url:'pages/work/inspectionDevice/index?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			/* 时间戳转日期 */
			timestampToTime(timestamp) {
			   var date = new Date(timestamp);  
			      var year = date.getFullYear();  
			      var month = String(date.getMonth() + 1).padStart(2, '0');  
			      var day = String(date.getDate()).padStart(2, '0');  
			      var hours = String(date.getHours()).padStart(2, '0');  
			      var minutes = String(date.getMinutes()).padStart(2, '0');  
			      var seconds = String(date.getSeconds()).padStart(2, '0');  
			      return year + '-' + month + '-' + day 
						// + ' ' + hours + ':' + minutes + ':' + seconds;  
			},
			/* 查询设备台账列表 */
			getListFun() {
				getInspectionPlanAppPage(this.queryParams).then(response => {
					this.$refs.paging.complete(response.data.list);
				}).catch(response => {
					this.$refs.paging.complete(false);
				})
			},
			/* 条件查询 */
			search(res) {
				this.getListFun()
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				this.queryParams.name = res
			},
			clear(res) {
				this.queryParams.name = ''
			},
			cancel(res) {
				this.queryParams.name = ''
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.data-list {
			.search {
				padding: 20rpx 30rpx 20rpx 30rpx;
				background-color: $uni-bg-color;
			}

			.item {
				background-color: $uni-bg-color;
				padding: 30rpx 30rpx 0rpx 30rpx;

				.item-title {
					font-size: $uni-font-size-base;
					font-weight: bold;
					margin-bottom: 15rpx;
				}

				.item-body {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}

				.item-bottom {
					display: flex;
					justify-content: space-between;
					height: 60rpx;
					line-height: 60rpx;

					.item-user {
						display: flex;
						margin-top: 10rpx;

						.item-avatar {
							width: 60rpx;
							height: 60rpx;
							background-color: $uni-color-primary;
							border-radius: 50%;
							color: $uni-text-color-inverse;
							font-size: 30rpx;
							font-weight: bold;
							line-height: 60rpx;
							text-align: center;
						}

						.item-name {
							font-size: $uni-font-size-base;
							margin-left: 10rpx;
							line-height: 60rpx;
						}
					}

					.item-status {
						height: 60rpx;
						line-height: 60rpx;
					}
				}
			}
		}

	}
</style>